<script lang="ts" name="IconPage" setup>
import { ElMessage } from 'element-plus'
import { useClipboard } from '@vueuse/core'
import IconMicro from '@micro/iconfont/iconfont.json'
// import IconSys from '@/assets/iconfont/iconfont.json'

const { copy, copied } = useClipboard({ legacy: true })

type TIcon = Array<{
  name: string
  class: string
  font_class: string
  font_family: string
  [key: string]: any
}>

const iconInfo: {
  mainIcon: TIcon
  microIcon: TIcon
  svg: TIcon
} = {
  mainIcon: [],
  microIcon: [],
  svg: []
}
const currentIconList: Ref<any[]> = ref([])

const getIconList = (
  icons: {
    css_prefix_text?: string
    font_family?: string
    glyphs?: Array<{ name: string; font_class: string; }>
  },
  type: string
) => {
  const iconList: any[] = []
  const { font_family: fm, glyphs, css_prefix_text } = icons
  if (!fm || !glyphs)
    return []
  for (const { name, font_class } of glyphs) {
    iconList.push({
      type,
      name: `${type} ${name}`,
      class: `${css_prefix_text}${font_class}`,
      font_class,
      font_family: fm
    })
  }
  return iconList
}
// iconInfo.mainIcon = getIconList(IconSys, 'icon-sys')
iconInfo.microIcon = getIconList(IconMicro, 'icon-micro')
iconInfo.svg = getIconList((window as any).iking_iconfont_json, 'ik_icon-svg')
const icons = [
  // {
  //   name: '系统图标',
  //   list: iconInfo.mainIcon,
  //   total: iconInfo.mainIcon.length
  // },
  {
    name: '项目图标',
    list: iconInfo.microIcon,
    total: iconInfo.microIcon.length
  },
  {
    name: '双色图标',
    list: iconInfo.svg,
    total: iconInfo.svg.length
  }
]
const myValue = ref('')
const search = ref('')
const activeName = ref(
  icons.some(item => item.name === myValue.value)
    ? myValue.value
    : icons[0].name
)

watch(copied, val => {
  if (val)
    ElMessage.success('复制成功！')
})

watch(
  () => search.value,
  val => {
    if (val) {
      const arr = currentIconList.value.filter((item: any) => {
        return item.name.toLowerCase().includes(val.toLowerCase())
      })
      return (currentIconList.value = arr)
    }
    else {
      getCurrentIconList()
    }
  }
)

onMounted(() => {
  getCurrentIconList()
})

const tabChange = () => {
  getCurrentIconList()
}

const getCurrentIconList = () => {
  currentIconList.value
    = icons.find(v => v.name === activeName.value)?.list || []
}

const copyCode = (val: any) => {
  copy(val)
}
</script>

<template>
  <div class="page">
    <el-tabs
      v-model="activeName"
      tab-position="left"
      class="demo-tabs"
      @tab-change="tabChange"
    >
      <el-tab-pane v-for="item in icons" :key="item.name" :name="item.name">
        <template #label>
          <div class="icon-label">
            <div class="name">
              {{ item.name }}
            </div>
            <div class="total">{{ item.total }} 个</div>
          </div>
        </template>
      </el-tab-pane>
    </el-tabs>
    <div class="main-container">
      <div class="search-bar">
        <el-input
          v-model.trim="search"
          size="large"
          placeholder="搜索..."
          clearable
        >
          <template #prefix>
            <IkSvgIcon name="i-ep:search" />
          </template>
        </el-input>
      </div>
      <div class="list-icon">
        <template v-for="(icon, index) in currentIconList" :key="index">
          <span class="icon-block" @click="copyCode(icon.class)">
            <IkSvgIcon
              :name="`${icon.class}`"
              class="list-icon-item"
              size="28"
            />
            <span class="name" :title="icon.class">{{ icon.class }}</span>
          </span>
        </template>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
:deep(.ik) {
  font-size: 28px !important;
}

:deep(.el-tabs--left .el-tabs__item.is-left) {
  margin: 15px 8px;
}

.page {
  display: flex;

  .main-container {
    flex: 1;

    .search-bar {
      margin: 0 40px;

      .el-input {
        margin-top: 20px;
      }
    }

    .list-icon {
      position: relative;
      margin: 15px 0;
      min-height: 160px;
      overflow-y: auto;
      height: calc(100vh - 90px);

      .ik {
        font-size: 28px !important;
      }

      .icon-block {
        width: 70px;
        height: 70px;
        vertical-align: top;
        margin: 6px;
        display: inline-flex;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border-radius: 14px;
        justify-content: center;
        border: 1px solid var(--el-border-color);
        padding: 0 7px;
        color: var(--ik-vice-text-color);
        cursor: pointer;

        // :deep(.el-icon) {
        //   margin-top: 6px;
        // }

        .name {
          display: inline-block;
          width: 100%;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          font-size: 16px !important;
          cursor: pointer;
        }
      }

      .icon-block:hover {
        --ik-main-icon-deep-color: var(--ik-theme-color);
        --ik-main-icon-color: var(--ik-theme-color-re);

        color: var(--el-color-primary);
      }

      .list-icon-item {
        box-sizing: content-box;
        cursor: pointer;
        transition: var(--el-transition-border);
        border-radius: 12px;

        &:nth-child(6n + 6) {
          margin-right: 0;
        }

        &:not(.empty):hover {
          border-color: var(--el-border-color-darker);
          color: var(--el-color-primary);
          transition: background-color 0.3s, var(--el-transition-border),
            var(--el-transition-color);
        }

        &.empty {
          border-color: transparent;
          color: var(--el-text-color-placeholder);
          transition: var(--el-transition-color);

          &:hover {
            color: var(--el-text-color-disabled);
          }
        }
      }
    }
  }
}
</style>
